@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentVm

@{
    var mark = new Dictionary<string, string>()
    {
        {"0-9-18", "mark1" },
        {"0-0-15", "middle" },
        {"2018-05-24", "publish" }
    };
}

<wt:fieldset field-set-style="Simple" title="DateTime">
 </wt:fieldset>
   <p>The common properties of datetime are:</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">property</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td>Control ID, generated by default according to the bound field name</td>
            </tr>
            <tr>
                <td>Field</td>
                <td>Binding field, required</td>
            </tr>
            <tr>
                <td>Disabled</td>
                <td>Disabled,or not</td>
            </tr>
            <tr>
                <td>Name</td>
                <td>Control name, generated by default according to the bound field name</td>
            </tr>
            <tr>
                <td>LabelText</td>
                <td>Label content</td>
            </tr>
            <tr>
                <td>LabelWidth</td>
                <td>Label length, default= 80</td>
            </tr>
            <tr>
                <td>HideLabel</td>
                <td>Hide label,or not</td>
            </tr>
            <tr>
                <td>Type</td>
                <td>Display mode: year, month, date, time and datetime</td>
            </tr>
            <tr>
                <td>Range</td>
                <td>Enable date range selection, default=false</td>
            </tr>
            <tr>
                <td>RangeSplit</td>
                <td>Time range separator， default‘~’ </td>
            </tr>
            <tr>
                <td>Min/Max</td>
                <td>
                    1. If the value tpye is character: mm / DD / yyyy must be divided by ‘-’(middle dash) and hour, minute and second must be divided by ‘:’ (half colon). The format set by format is not followed here. 
                    2. If the value type is integer and the number is less than 86400000, then the number represents the number of days, such as Min: - 7, that is, the minimum date is 7 days ago, and the positive number represents several days later 
                    3. If the value type is integer type and the number ≥ 86400000, then the number represents the time stamp, such as Max: 4073558400000, i.e. the maximum date is January 1, 3000 A.D
                </td>
            </tr>
            <tr>
                <td>Format</td>
                <td>
                    Time custom format; default value: yyyy-mm-d yyyy year, at least four digits. If it is less than four digits, then zero y year will be filled.There is no limit to the number of digits, no matter how many digits of the year, zero MM month will be filled in front of it. If it is less than two digits, zero shall be filled in front. M month, one digit allowed. DD date, at least two digits. If there are less than two digits, zero shall be filled in front. D date, one digit is allowed. HH hours, at least two digits. If there are less than two digits, zero shall be filled in front. H hours, one digit allowed. Mm minutes, at least two digits. If it is less than two digits, zero shall be filled in front. M minutes, one digit of SS seconds is allowed, at least two digits. If there are less than two digits, zero shall be filled in front. S seconds, one digit allowed.
                </td>
            </tr>
            <tr>
                <td>ZIndex</td>
                <td>
                    Stacking order , generally used to solve the problem of mutual concealment with other elements. If the position parameter is set to static, it is not valid;Type: number,default: 666666
                </td>
            </tr>
            <tr>
                <td>ShowBottom</td>
                <td>Show bottom bar or not</td>
            </tr>
            <tr>
                <td>Lang</td>
                <td>Language ,Default:CN,Options:CN, en </td>
            </tr>
            <tr>
                <td>Calendar</td>
                <td>Whether to display the Gregorian calendar festival or not; there are some built-in important festivals of the general Gregorian calendar in China, which can be enabled by setting true. The international version will not be displayed.</td>
            </tr>
            <tr>
                <td>Mark</td>
                <td>
                    Note important date note format description the date of each year 
                </td>
            </tr>
            <tr>
                <td>ReadyFunc</td>
                <td>
                   Control's initial  callback, which is triggered when the control is opened. The callback returns two parameters: the initial date time object and the current instance object
                </td>
            </tr>
            <tr>
                <td>ChangeFunc</td>
                <td>
                    The callback after the date time is switched
                    will be triggered when any of date month and year is switched. The callback returns four parameters,:generated value, date time object, end date time object and current instance object
                </td>
            </tr>
            <tr>
                <td>DoneFunc</td>
                <td>
                    Callback sfter the control is selected;
                    click date, clear, now and confirm will trigger;
                    he callback returns four parameters:generated value, date time object, end date time object and current instance object.
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <wt:quote>
        <p>DateTime usage</p>
    </wt:quote>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model" style="max-width:600px;">
                    <wt:datetime field="Entity.EnRollDate" min="2018-01-01" max="2038-08-01" type="Date" show-bottom="false" />
                    <wt:datetime field="Entity.EnRollDateRange" min="2018-01-01" max="2038-08-01" type="Date" range="true" confirm-only="true"/>
                    <wt:datetime field="Entity.EnYearRange" min="2016-1-1" max="2038-08-01" type="Year" range="true" confirm-only="true"/>
                    <wt:datetime field="Entity.EnMonthRange" min="2018-01-01" max="2038-08-01" type="Month" range="true" confirm-only="true"/>
                    <wt:datetime field="Entity.EnTimeRange" min="12:09:09" max="20:00:00" type="Time" range="true" />
                    <wt:datetime field="Entity.EnTimeRange0"
                                 min="2018-01-01 00:00:00"
                                 max="2038-08-01 23:59:59"
                                 type="DateTime"
                                 range="true"
                                 range-split="~"
                                 format="yyyy-MM-ddTHH:mm:ss" />
                    <wt:datetime field="Entity.EnTimeRange1"
                                 type="DateTime"
                                 lang="DateTimeLangEnum.EN" />
                    <wt:datetime field="Entity.EnTimeRange2"
                                 type="DateTime"
                                 calendar="true" />
                    <wt:datetime field="Entity.EnTimeRange3"
                                 type="DateTime"
                                 mark="@mark" />
                    <wt:datetime field="Entity.EnTimeRange4"
                                 type="DateTime"
                                 range="true"
                                 ready-func="readyFunc"
                                 change-func="changeFunc"
                                 done-func="doneFunc"  confirm-only="true"/>
                    <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true" />
                        <wt:closebutton disabled="true" />
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
@@{
    var mark = new Dictionary&ltstring, string&gt()
    {
        {"0-9-18", "Mark1" },
        {"0-0-15", "Middle" },
        {"2018-05-24", "Publish" }
    };
}

&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:datetime field="Entity.EnRollDate" min="2018-01-01" max="2038-08-01" type="Date" show-bottom="false" /&gt
    &ltwt:datetime field="Entity.EnRollDateRange" min="2018-01-01" max="2038-08-01" type="Date" range="true" confirm-only="true" /&gt
    &ltwt:datetime field="Entity.EnYearRange" min="2016-1-1" max="2038-08-01" type="Year" range="true" confirm-only="true" /&gt
    &ltwt:datetime field="Entity.EnMonthRange" min="2018-01-01" max="2038-08-01" type="Month" range="true" confirm-only="true" /&gt
    &ltwt:datetime field="Entity.EnTimeRange" min="12:09:09" max="20:00:00" type="Time" range="true" /&gt
    &ltwt:datetime field="Entity.EnTimeRange0"
                    min="2018-01-01 00:00:00"
                    max="2038-08-01 23:59:59"
                    type="DateTime"
                    range="true"
                    range-split="~"
                    format="yyyy-MM-ddTHH:mm:ss" /&gt
    &ltwt:datetime field="Entity.EnTimeRange1"
                    type="DateTime"
                    lang="DateTimeLangEnum.EN" /&gt
    &ltwt:datetime field="Entity.EnTimeRange2"
                    type="DateTime"
                    calendar="true" /&gt
    &ltwt:datetime field="Entity.EnTimeRange3"
                    type="DateTime"
                    mark="@@mark" /&gt
    &ltwt:datetime field="Entity.EnTimeRange4"
                    type="DateTime"
                    range="true"
                    ready-func="readyFunc"
                    change-func="changeFunc"
                    done-func="doneFunc" confirm-only="true" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt

&ltscript&gt
layui.use('code',function(){layui.code({ about: false })})
    layui.table.init('parse-table-demo', { limit: 100, height: 'full-400' });

    function readyFunc(value, _this) {
        console.log("readyFunc");
        console.log(value)
        console.log(_this)
    }
    function changeFunc(value, date, endDate, _this) {
        console.log("changeFunc");
        console.log(value)
        console.log(date)
        console.log(endDate)
        console.log(_this)
    }
    function doneFunc(value, date, endDate, _this) {
        console.log("doneFunc");
        console.log(value)
        console.log(date)
        console.log(endDate)
        console.log(_this)
    }
&lt/script&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

<script>
layui.use('code',function(){layui.code({ about: false })})
    layui.table.init('parse-table-demo', { limit: 100, height: 'full-400',page:false });

    function readyFunc(value, _this) {
        console.log("readyFunc");
        console.log(value)
        console.log(_this)
    }
    function changeFunc(value, date, endDate, _this) {
        console.log("changeFunc");
        console.log(value)
        console.log(date)
        console.log(endDate)
        console.log(_this)
    }
    function doneFunc(value, date, endDate, _this) {
        console.log("doneFunc");
        console.log(value)
        console.log(date)
        console.log(endDate)
        console.log(_this)
    }
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
